<template>
    <div class="page-lock-detail">
        <div class="list">
            <block v-if="rebateDetailList && rebateDetailList.list.length">
                <div class="item" v-for="(item, index) in rebateDetailListCurrency" :key="index">
                    <div class="inner-box">
                        <div class="avatar">
                            <img class="border-round" :src="item.avatar" mode="aspectFill" />
                        </div>
                        <div class="info">
                            <div class="name text-huge">{{item.nickname}}</div>
                            <div class="rank grey-color text-small">{{item.title}}</div>
                            <div class="rank grey-color text-small">{{item.title}}</div>
                            <div class="rank grey-color text-small" v-if="item.shop">{{item.shop}}</div>
                        </div>
                    </div>
                    <div class="count-box">
                        <div class="count text-huge color-red">
                            +{{item.money}}
                        </div>
                        <div class="time grey-color text-small">
                            {{item.created_at}}
                        </div>
                    </div>
                </div>
            </block>
            <ListEmpty v-else />
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import {
    currency,
    placeholderImg,
} from '@/lib/utils';
import ListEmpty from '@/components/list/listEmpty.vue';

import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'PartnerLockDetail',
    components: {
        ListEmpty,
    },
})
export default class PartnerLockDetail extends Vue {
    public placeholderImg: any = placeholderImg;

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }

    public get rebateDetailListMap() {
        return store.state.user.rebateDetailListMap;
    }

    public get rebateDetailList() {
        return this.rebateDetailListMap[this.key] ? this.rebateDetailListMap[this.key] : null;
    }

    public get rebateDetailListCurrency() {
        return this.rebateDetailList && this.rebateDetailList.list ? this.rebateDetailList.list.map((item: any) => Object.assign(
            JSON.parse(JSON.stringify(item)), {
                money: currency(item.money),
            }
        )) : [];
    }

    public async onReachBottom() {
        store.dispatch('user/getRebateDetailList', {
            offset: this.rebateDetailList.list.length,
            count: 10,
        });
    }

    public async created() {
        window.addEventListener('reachbottom', this.onReachBottom);

        store.commit('utils/startRequest');
        await store.dispatch('user/getRebateDetailList', {
            offset: 0,
            count: 10,
            forceUpdate: true,
        });
        store.commit('utils/endRequest');
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-lock-detail {
    .list {
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            &:not(:last-child) {
                border-bottom: 2rpx solid #ebebeb;
            }
            .inner-box {
                display: flex;
                align-items: center;
            }
            .avatar {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}

</style>
